<template>
  <van-nav-bar
    title="创建订单"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  
  <van-form @submit="onSubmit">
    <!-- 产品信息 -->
    <van-cell-group>
      <van-cell title="景点名称" :value="productInfo.attname" />
      <van-cell title="票务类型" :value="productInfo.ticketType" />
      <van-cell title="产品名称" :value="productInfo.productName" />
      <van-cell title="价格" :value="'¥' + productInfo.price" />
    </van-cell-group>

    <!-- 游客信息 -->
    <van-cell-group title="游客信息">
      <van-field
        v-model="form.visitorName"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="form.phone"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }]"
      />
      <van-field
        v-model="form.idCard"
        label="身份证号"
        placeholder="请输入身份证号"
        :rules="[{ pattern: /^\d{17}[\dXx]$/, message: '身份证号格式错误' }]"
      />
    </van-cell-group>

    <!-- 优惠券选择 -->
    <!-- <van-cell title="优惠券" is-link @click="showCouponPicker = true">
      <template #value>
        {{ selectedCoupon || '请选择优惠券' }}
      </template>
    </van-cell> -->

    <!-- 支付方式 -->
    <van-cell-group title="支付方式">
      <van-radio-group v-model="form.payMethod">
        <van-cell
          v-for="method in payMethods"
          :key="method.value"
          clickable
          @click="form.payMethod = method.value"
        >
          <template #title>
            <van-radio :name="method.value">{{ method.label }}</van-radio>
          </template>
        </van-cell>
      </van-radio-group>
    </van-cell-group>

    <!-- 提交按钮 -->
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交订单（实付：¥{{ actualAmount }}
      </van-button>
    </div>
  </van-form>

  <!-- 优惠券选择器 -->
  <!-- <van-popup v-model:show="showCouponPicker" position="bottom">
    <van-picker
      :columns="coupons"
      @confirm="onConfirmCoupon"
      @cancel="showCouponPicker = false"
    />
  </van-popup> -->
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import http from '../http'

const router = useRouter()
const route = useRoute()

// 初始化产品信息
const productInfo = ref({
  attractionId: '',
  attname: '故宫博物院',
  ticketType: '',
  ticket_id: '',
  productName: '',
  price: 0
})

// 表单数据
const form = ref({
  visitorName: '',
  phone: '',
  idCard: '',
  couponId: null,
  payMethod: 'alipay'
})

// 支付方式选项
const payMethods = [
  { label: '支付宝', value: 'alipay' },
//   { label: '微信支付', value: 'wechat' },
//   { label: '银联支付', value: 'unionpay' }
]

// 优惠券相关
// const coupons = ref([])
// const selectedCoupon = ref('')
// const showCouponPicker = ref(false)

// 计算实付金额
const actualAmount = computed(() => {
  // 此处应加入优惠券抵扣逻辑
  return productInfo.value.price
})

// 返回按钮
const onClickLeft = () => {
  router.back()
}

const onSubmit = () => {
  http.post('/order/add/', {
    name: productInfo.value.attname+productInfo.value.productName,
    price: productInfo.value.price,
    ticket_id: productInfo.value.ticket_id,
    user_id: localStorage.getItem('userid'),
    num: 1,
  })
    .then(res => {
      console.log(res.data)
   
      router.push({
        path: '/pay',
        query: { ordernum : res.data.data.ordernum}
      })
    })
    .catch(err => {
      console.log(err)
    })
}


// 加载初始数据
onMounted(() => {
  // 获取路由参数
  productInfo.value = {
    attractionId: route.query.attractionId,
    attname: route.query.attname,
    ticketType: route.query.ticketType,
    productName: route.query.productName,
    price: parseFloat(route.query.price),
    ticket_id: route.query.ticket_id
  }
})



</script>

<style scoped>
.van-cell {
  font-size: 14px;
}
.van-button {
  margin-top: 20px;
}
</style>